<template>
  <main class="content">
    <div class="admin-title">
      <div>师生留言</div>
    </div>
    <div class="table">
      <template>
        <el-table
          ref="multipleTable"
          :data="tableData"
          border
          style="width: 100%"
          @current-change="handleCurrentChange"
          @selection-change="handleSelectionChange"
          :header-cell-style="{ background: '#bd3f32', color: '#fff' }"
          :height="`calc(100vh - 174px)`"
        >
          <el-table-column type="selection" width="40" align="center">
          </el-table-column>
          <el-table-column type="index" label="序号" width="40" align="center">
          </el-table-column>
          <el-table-column
            prop="create_time"
            label="提交日期"
            width="95"
            align="center"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.create_time | filter_year }}
              </div>
              <div>
                {{ scope.row.create_time | filter_month }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" width="200" align="center">
          </el-table-column>
          <el-table-column prop="content" label="内容" width="380">
          </el-table-column>
          <el-table-column prop="huifu" label="回复" min-width="300">
          </el-table-column>
          <el-table-column
            label="操作"
            width="140"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <div style="display: flex; justify-content: space-between">
                <div>
                  <el-button
                    type="success"
                    size="small"
                    @click="reply(scope.row)"
                    >回复</el-button
                  >
                </div>
                <div>
                  <el-button
                    type="danger"
                    size="small"
                    @click="deleteFeedback(scope.row.id)"
                    >删除</el-button
                  >
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!-- el-drawer -->
    <div>
      <el-drawer
        title="用户留言"
        :before-close="handleClose"
        :visible.sync="dialog"
        direction="ltr"
        custom-class="demo-drawer"
        ref="drawer"
      >
        <div
          style="
            display: flex;
            flex-direction: column;
            height: calc(100vh - 77px);
          "
        >
          <div class="demo-drawer__content">
            <div class="title">{{ feedback_row.title }}</div>
            <div class="date">{{ feedback_row.create_time }}</div>
            <el-divider></el-divider>
            <div class="row_content">
              <div>{{ feedback_row.content }}</div>
              <!-- v-if="showInfo" -->
              <div class="teacher" v-if="showInfo">
                <div class="huifu">
                  <div class="send_info">{{ huifu }}</div>
                </div>
                <div class="head_image">
                  <img
                    src="https://gimg3.baidu.com/search/src=https%3A%2F%2Fstatic-data.gaokao.cn%2Fupload%2Flogo%2F2520.jpg%3Ft%3D1695139216&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=w931&n=0&g=0n&er=404&q=75&fmt=auto&maxorilen2heic=2000000?sec=1695488400&t=f6ca2c3fe37d8f4ee4620cf64fb17295"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="respond">
            <div class="input">
              <el-form :model="form" ref="form">
                <el-form-item prop="huifu">
                  <el-input
                    type="textarea"
                    placeholder="请输入内容"
                    :rows="10"
                    autosize
                    v-model="form.huifu"
                  >
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
            <div class="button">
              <div class="el">
                <el-button
                  type="success"
                  size="mini"
                  @click="sendInfo('form', form)"
                  >发送</el-button
                >
              </div>
            </div>
          </div>
          <div class="demo-drawer__footer">
            <el-button @click="cancelForm">取 消</el-button>
          </div>
        </div>
      </el-drawer>
    </div>
    <Transition>
      <div class="allDelete" v-show="show">
        <div style="margin-right: 20px">
          <el-button
            type="info"
            size="small"
            round
            @click="toggleSelection(), (show = false)"
            >取消</el-button
          >
        </div>
        <div>
          <el-button
            icon="el-icon-delete"
            size="small"
            type="danger"
            round
            @click="bulk_deletion"
            >批量删除</el-button
          >
        </div>
      </div></Transition
    >
  </main>
</template>

<script>
import {
  getFeedbackList,
  deletFeedbackList,
  sendFeedback,
} from "@/api/feedback";
export default {
  data() {
    return {
      tableData: [],

      //选择单行
      currentRow: null,

      // 弹框
      dialog: false,
      loading: false,
      hhhh: "",
      form: {
        huifu: "",
      },
      timer: null,

      feedback_row: {},

      showInfo: false,

      huifu: "",

      show: false,

      delete: [],
    };
  },

  filters: {
    filter_year: function (value) {
      let year = value.trim().split(" ")[0];
      return year;
    },

    filter_month: function (value) {
      let month = value.trim().split(" ")[1];
      return month;
    },
  },

  created() {
    this.init();
  },

  methods: {
    init() {
      this.getFeedbackList();
    },

    //获取用户留言
    getFeedbackList() {
      getFeedbackList().then((res) => {
        this.tableData = res.data.reverse();
      });
    },

    //删除用户留言
    deleteFeedback(id) {
      let row_id = {
        id: [id],
      };
      this.$confirm("此操作将永久删除该留言, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          deletFeedbackList(row_id).then((res) => {
            this.init();
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: "删除成功",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    handleCurrentChange(val) {
      this.currentRow = val;
    },

    //选择列表
    handleSelectionChange(val) {
      if (val.length > 0) {
        this.show = true;
        var data = [];
        val.forEach((response) => {
          let id = response.id;
          data.push(id);
        });
        this.delete = data;
      } else {
        this.show = false;
      }
    },

    //取消选择列表
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    // 回复用户
    handleClose(done) {
      let a = this.form.huifu;
      if (a != "" && a != undefined) {
        this.$confirm("确定关闭吗")
          .then((_) => {
            this.$refs.form.resetFields();
            done();
          })
          .catch((_) => {});
      } else {
        done();
      }
    },

    //关闭抽屉
    cancelForm() {
      let a = this.form.huifu;
      if (a != "" && a != undefined) {
        this.$confirm("确定关闭吗")
          .then((_) => {
            this.$refs.form.resetFields();
            this.dialog = false;
          })
          .catch((_) => {});
      } else {
        this.dialog = false;
      }
    },

    //显示抽屉
    reply(row) {
      this.dialog = true;
      if (row.huifu == null || row.huifu == "") {
        this.showInfo = false;
      } else {
        this.huifu = row.huifu;
        this.showInfo = true;
      }
      this.feedback_row = row;
    },

    //回复用户
    sendInfo(form, row) {
      let send = {
        id: this.feedback_row.id,
        huifu: row.huifu,
      };
      this.huifu = row.huifu;
      this.$refs.form.resetFields();
      sendFeedback(send).then((res) => {
        this.showInfo = true;
        this.init();
        this.$message({
          type: "success",
          message: "回复成功",
        });
      });
    },

    //批量删除
    bulk_deletion() {
      let row_id = {
        id: this.delete,
      };
      this.$confirm("此操作将永久删除这些留言, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          deletFeedbackList(row_id).then((res) => {
            this.init();
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: "删除成功",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: calc(100vh - 84px);
  width: 100%;
  position: relative;

  .admin-title {
    width: calc(100% - 40px);
    height: 50px;
    box-sizing: border-box;
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, #0000002e 0%, #0000002e 100%) 2 2 2 2;
    margin-left: 20px;
    margin-right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    div {
      line-height: 60px;
    }
  }

  .table {
    padding: 20px;
  }

  .demo-drawer__content {
    padding: 0 20px;
    flex: 1;
    overflow: auto;

    .title {
      font-size: 18px;
      font-weight: 600;
    }

    .date {
      color: rgb(154, 154, 154);
      font-size: 14px;
      margin-top: 5px;
    }

    .row_content {
      font-size: 15px;
      line-height: 20px;

      .teacher {
        display: flex;
        margin-top: 88px;
        // border-top: 1px solid #cacaca;
        padding-top: 20px;
        justify-content: right;

        .head_image {
          height: 50px;
          width: 50px;
          border-radius: 50%;

          img {
            height: 50px;
            width: 50px;
            border-radius: 50%;
            display: block;
          }
        }
        .huifu {
          margin-right: 10px;
          padding: 8px;
          background-color: #95ec69;
          width: 50%;
          border-radius: 8px;

          .send_info {
            // width: calc(100vw - 100px);
            word-wrap: break-word;
            word-break: break-all;
          }
        }
      }
    }
  }

  .respond {
    background-color: #f7f7f7;
    display: flex;
    flex-direction: initial;

    .input {
      flex: 1;
      padding: 10px 0 10px 10px;
    }

    .button {
      padding: 10px;
      width: 76px;
      position: relative;

      .el {
        position: absolute;
        bottom: 10px;
      }
    }
  }

  .demo-drawer__footer {
    max-height: 60px;
    padding: 10px;
    display: flex;
    justify-content: right;
  }

  .allDelete {
    position: absolute;
    background: rgb(237, 237, 237);
    height: 50px;
    width: 100%;
    top: 0;
    display: flex;
    justify-content: right;
    align-items: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-right: 20px;
  }

  .v-enter,
  .v-leave-to {
    transform: translateY(-100%);
  }

  .v-enter-active,
  .v-leave-active {
    transition: 1s;
  }

  .v-enter-to {
    transform: translateY(0);
  }

  ::v-deep .el-textarea__inner {
    min-height: 50px !important;
    max-height: 200px !important;
    // height: 50px !important;
  }

  // ::v-deep .el-textarea {
  //   height: 0;
  // }

  ::v-deep .el-collapse-item__content {
    padding-bottom: 0px;
  }

  // ::v-deep .el-collapse {
  //   border-top: 0px solid #ebeef5;
  //   border-bottom: 0px solid #ebeef5;
  // }

  ::v-deep .el-form-item {
    margin-bottom: 0;
  }

  ::v-deep .el-drawer__body {
    flex-direction: column;
  }
}
</style>